<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                template="./index.xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

    <ui:define name="title">
        <title>IDU Đà Nẵng - Danh sách câu hỏi</title>
    </ui:define>

    <ui:define name="content">
        <div class="row">
            <ul class="nav nav-tabs" role="tablist">
                <li style="margin-top: 10px; font-weight: bold; font-size: larger; margin-right: 30%">
                    <label>Danh sách câu hỏi</label>
                </li>
                <li class="active"><a href="#newest" role="tab" data-toggle="tab">Mới nhất</a></li> 
                <li><a href="#votes" role="tab" data-toggle="tab">Lượt votes</a></li>
                <li><a href="#open" role="tab" data-toggle="tab">Mở</a></li>
                <li><a href="#anwsered" role="tab" data-toggle="tab">Đã trả lời</a></li>
                <li><a href="#done" role="tab" data-toggle="tab">Đã hoàn thành</a></li>
            </ul>
        </div> <h:form>
            <div class="tab-content" style="margin-top: 20px">
                <div class="tab-pane active" id="newest">
                    <div class="col-md-12">
                        <ui:repeat value="#{paginationQuestion.questionList}" var="question">
                            <div class="row" style="margin-bottom: 10px; border-bottom: #cccccc 1px solid">
                                <div class="col-md-1 text-center">
                                    <img src="#{empty question.answers or question.answers.size() eq 0 ? '../resources/images/icon/icon-question.png'
                                                : '../resources/images/icon/icon-reply.png'}" width="30px" alt="" />
                                </div>
                                <div class="col-md-7">
                                    <h:commandLink style="color: blue; font-size: larger" value="#{question.questionName}" action="#"/><br/>
                                    <h:commandLink class="post-user" action="#" value="#{question.user.userName}"/>
                                    <span class="post-info">đã hỏi ngày </span>
                                    <h:outputLabel class="post-info" value="#{question.updateDate}">
                                        <f:convertDateTime pattern="dd-MM-yyyy"/>
                                    </h:outputLabel>,
                                    <span class="post-info">Danh mục: </span>
                                    <h:commandLink style="font-size: smaller" value="#{question.category.categoryName}" />
                                </div>
                                <div class="col-md-2 text-center">
                                    <div style="border: #cccccc 1px solid">
                                        <lable class="text-center">#{question.viewCount}</lable><br/>
                                        <lable class="text-center">lượt xem</lable>
                                    </div>
                                </div>
                                <div class="col-md-1 text-center">
                                    <div style="border: #cccccc 1px solid">
                                        <span class="text-center">#{question.answers.size()}</span><br/>
                                        <span class="text-center">trả lời</span>
                                    </div>
                                </div>
                                <div class="col-md-1 text-center">
                                    <div style="border: #cccccc 1px solid">
                                        <span class="text-center">#{question.vote}</span><br/>
                                        <span class="text-center">vote</span>
                                    </div>
                                </div>
                            </div>
                        </ui:repeat>
                    </div>
                    <div class="row">
                        <ul class="pagination">  
                            <li class="disabled"><h:link value="Page #{paginationQuestion.currentPage} / #{paginationQuestion.totalPages}" /> </li>
                            <li><h:commandLink value="First" action="#{paginationQuestion.pageFirst}"
                                               disabled="#{paginationQuestion.firstRow == 0}" /></li>
                            <li><h:commandLink value="«" action="#{paginationQuestion.pagePrevious}"
                                               disabled="#{paginationQuestion.firstRow == 0}" /></li>
                            <ui:repeat value="#{paginationQuestion.pages}" var="page">
                                <li class="#{page == paginationQuestion.currentPage?'active':''}">
                                    <h:commandLink value="#{page}" actionListener="#{paginationQuestion.page}"
                                                   disabled="#{page == paginationQuestion.currentPage}" />
                                </li>
                            </ui:repeat>

                            <li><h:commandLink value="»" action="#{paginationQuestion.pageNext}"
                                               disabled="#{paginationQuestion.firstRow + paginationQuestion.rowsPerPage &gt;= paginationQuestion.totalRows}" /></li>
                            <li><h:commandLink value="Last" action="#{paginationQuestion.pageLast}"
                                               disabled="#{paginationQuestion.firstRow + myBean.rowsPerPage &gt;= paginationQuestion.totalRows}" /></li>
                        </ul>
                    </div>
                </div>
                <div class="tab-pane" id="votes">
                    <div class="col-md-12">
                        <ui:repeat value="#{paginationQuestion.questionListByVotes}" var="question">
                            <div class="row" style="margin-bottom: 10px; border-bottom: #cccccc 1px solid">
                                <div class="col-md-1 text-center">
                                    <img src="#{empty question.answers or question.answers.size() eq 0 ? '../resources/images/icon/icon-question.png'
                                                : '../resources/images/icon/icon-reply.png'}" width="30px" alt="" />
                                </div>
                                <div class="col-md-7">
                                    <h:commandLink style="color: blue; font-size: larger" value="#{question.questionName}" action="#"/><br/>
                                    <h:commandLink class="post-user" action="#" value="#{question.user.userName}"/>
                                    <span class="post-info">đã hỏi ngày </span>
                                    <h:outputLabel class="post-info" value="#{question.updateDate}">
                                        <f:convertDateTime pattern="dd-MM-yyyy"/>
                                    </h:outputLabel>,
                                    <span class="post-info">Danh mục: </span>
                                    <h:commandLink style="font-size: smaller" value="#{question.category.categoryName}" />
                                </div>
                                <div class="col-md-2 text-center">
                                    <div style="border: #cccccc 1px solid">
                                        <lable class="text-center">#{question.viewCount}</lable><br/>
                                        <lable class="text-center">lượt xem</lable>
                                    </div>
                                </div>
                                <div class="col-md-1 text-center">
                                    <div style="border: #cccccc 1px solid">
                                        <span class="text-center">#{question.answers.size()}</span><br/>
                                        <span class="text-center">trả lời</span>
                                    </div>
                                </div>
                                <div class="col-md-1 text-center">
                                    <div style="border: #cccccc 1px solid">
                                        <span class="text-center">#{question.vote}</span><br/>
                                        <span class="text-center">vote</span>
                                    </div>
                                </div>
                            </div>
                        </ui:repeat>
                    </div>
                    <div class="row">
                        <ul class="pagination">  
                            <li class="disabled"><h:link value="Page #{paginationQuestion.currentPage} / #{paginationQuestion.totalPages}" /> </li>
                            <li><h:commandLink value="First" action="#{paginationQuestion.pageFirst}"
                                               disabled="#{paginationQuestion.firstRow == 0}" /></li>
                            <li><h:commandLink value="«" action="#{paginationQuestion.pagePrevious}"
                                               disabled="#{paginationQuestion.firstRow == 0}" /></li>
                            <ui:repeat value="#{paginationQuestion.pages}" var="page">
                                <li class="#{page == paginationQuestion.currentPage?'active':''}">
                                    <h:commandLink value="#{page}" actionListener="#{paginationQuestion.page}"
                                                   disabled="#{page == paginationQuestion.currentPage}" />
                                </li>
                            </ui:repeat>

                            <li><h:commandLink value="»" action="#{paginationQuestion.pageNext}"
                                               disabled="#{paginationQuestion.firstRow + paginationQuestion.rowsPerPage &gt;= paginationQuestion.totalRows}" /></li>
                            <li><h:commandLink value="Last" action="#{paginationQuestion.pageLast}"
                                               disabled="#{paginationQuestion.firstRow + myBean.rowsPerPage &gt;= paginationQuestion.totalRows}" /></li>
                        </ul>
                    </div>
                </div>
                <div class="tab-pane" id="anwsered">

                </div>
                <div class="tab-pane" id="done">

                </div>
            </div>
        </h:form>
    </ui:define>

    <ui:define name="right-content">
        right-content
    </ui:define>

</ui:composition>
